import React, { useState, useEffect } from 'react';
import { Empty, message } from 'antd';
import { Line } from '@ant-design/charts';
import { getCallnumber, getCallduration } from 'admin/servers/modules/DataStatistics';

interface IProp {
  /**
   * y轴别名名称
   */
  yAxisAlias: string;
  /**
   * 接口名称：
   * 通话量：callnumber
   * 通话时长：callduration
   */
  type: string;
  /**
   * 精度：默认为0，取整数。为1则保留1位精度
   */
  precision?: number;
  /**
   * 计时器
   */
  timer: number;
}
const ChartLine: React.FC<IProp> = (props: IProp) => {
  const [data, setData] = useState<any>([]); // 折线图数据
  const [tab, setTab] = useState<string>('day'); // 高亮的卡片，给后端的关键字：timeInterval
  useEffect(() => {
    const fetchData = (type: string, tab: string, timer: number) => {
      // console.log("折线图--图表类型：", type);
      // 后端返回数据处理
      if (type === 'callnumber') {
        getCallnumber({ timeInterval: tab })
          .then(res => {
            if (res.code === 0) {
              const { data } = res;
              console.log('Row:3-1 折线图-后端返回数据', type, tab, data);
              setData(data);
            } else {
              message.error(`${res.tips}(错误码: ${res.code})`);
            }
          })
          .catch(error => {
            console.error(`系统异常: ${JSON.stringify(error)}`);
          });
        // mock数据-begin
        // let data = [];
        // if (tab === "day") {
        //   data = [
        //     {
        //       time: "11月1日",
        //       value: 1100,
        //     },
        //     {
        //       time: "11月2日",
        //       value: 2300,
        //     },
        //     {
        //       time: "11月3日",
        //       value: 1100,
        //     },
        //     {
        //       time: "11月4日",
        //       value: 3960,
        //     },
        //     {
        //       time: "11月5日",
        //       value: 1200,
        //     },
        //     {
        //       time: "11月6日",
        //       value: 2876,
        //     },
        //     {
        //       time: "11月7日",
        //       value: 1523,
        //     },
        //   ];
        // } else if (tab === "week") {
        //   data = [
        //     {
        //       time: "11月1日",
        //       value: 3100,
        //     },
        //     {
        //       time: "11月7日",
        //       value: 4300,
        //     },
        //     {
        //       time: "11月14日",
        //       value: 1500,
        //     },
        //     {
        //       time: "11月21日",
        //       value: 2300,
        //     },
        //     {
        //       time: "11月28日",
        //       value: 3200,
        //     },
        //     {
        //       time: "12月5日",
        //       value: 4876,
        //     },
        //     {
        //       time: "12月13日",
        //       value: 2110,
        //     },
        //   ];
        // } else {
        //   data = [
        //     {
        //       time: "5月1日",
        //       value: 45000,
        //     },
        //     {
        //       time: "6月1日",
        //       value: 34300,
        //     },
        //     {
        //       time: "7月1日",
        //       value: 13500,
        //     },
        //     {
        //       time: "8月1日",
        //       value: 23100,
        //     },
        //     {
        //       time: "9月1日",
        //       value: 33200,
        //     },
        //     {
        //       time: "10月1日",
        //       value: 41876,
        //     },
        //     {
        //       time: "11月1日",
        //       value: 26110,
        //     },
        //   ];
        // }
        // console.log("后端返回数据", data, tab);
        // setData(data);
      }
      if (type === 'callduration') {
        getCallduration({ timeInterval: tab })
          .then(res => {
            if (res.code === 0) {
              const { data } = res;
              console.log('Row:3-2 折线图-后端返回数据', type, tab, data);
              setData(data);
            } else {
              message.error(`${res.tips}(错误码: ${res.code})`);
            }
          })
          .catch(error => {
            console.error(`系统异常: ${JSON.stringify(error)}`);
          });
        // mock数据--begin
        // let data = [];
        // if (tab === "day") {
        //   data = [
        //     {
        //       time: "11月1日",
        //       value: 30,
        //     },
        //     {
        //       time: "11月2日",
        //       value: 20,
        //     },
        //     {
        //       time: "11月3日",
        //       value: 10,
        //     },
        //     {
        //       time: "11月4日",
        //       value: 60,
        //     },
        //     {
        //       time: "11月5日",
        //       value: 20,
        //     },
        //     {
        //       time: "11月6日",
        //       value: 76,
        //     },
        //     {
        //       time: "11月7日",
        //       value: 23,
        //     },
        //   ];
        // } else if (tab === "week") {
        //   data = [
        //     {
        //       time: "11月1日",
        //       value: 100,
        //     },
        //     {
        //       time: "11月7日",
        //       value: 400,
        //     },
        //     {
        //       time: "11月14日",
        //       value: 150,
        //     },
        //     {
        //       time: "11月21日",
        //       value: 230,
        //     },
        //     {
        //       time: "11月28日",
        //       value: 320,
        //     },
        //     {
        //       time: "12月5日",
        //       value: 76,
        //     },
        //     {
        //       time: "12月13日",
        //       value: 110,
        //     },
        //   ];
        // } else {
        //   data = [
        //     {
        //       time: "5月1日",
        //       value: 400,
        //     },
        //     {
        //       time: "6月1日",
        //       value: 300,
        //     },
        //     {
        //       time: "7月1日",
        //       value: 150,
        //     },
        //     {
        //       time: "8月1日",
        //       value: 230,
        //     },
        //     {
        //       time: "9月1日",
        //       value: 330,
        //     },
        //     {
        //       time: "10月1日",
        //       value: 876,
        //     },
        //     {
        //       time: "11月1日",
        //       value: 210,
        //     },
        //   ];
        // }
        // console.log("后端返回数据", data, tab);
        // setData(data);
      }
      // 接口名称-差异
      // 通话量统计-接口名称
      // y轴-取整数
      // y轴-无单位
      // 通话时长统计-接口名称
      // y轴-精确到一位小数
      // y轴-单位-h
    };
    /**
     * 请求后端接口数据
     */
    fetchData(props.type, tab, props.timer);
  }, [tab, props.timer, props.type]);

  // 改变tab切换
  const changeTab = (tab: string) => {
    setTab(tab);
  };

  // 图表配置
  const config = {
    data: data,
    padding: [40, 90, 40, 0],
    height: 210,
    xField: 'time',
    yField: 'value',
    xAxis: {
      line: null,
      tickLine: null,
      label: {
        offset: 18,
        style: {
          fill: '#fff',
        },
      },
    },
    yAxis: {
      alias: props.yAxisAlias,
      position: 'right', // y轴居右，报错
      line: null,
      tickLine: null,
      grid: null, // 坐标轴网格线的配置项
      // min: 0, // 有问题，水平线粗细不一样
      tickCount: 5, // 坐标轴刻度总数
      label: {
        offset: 1,
        style: {
          fill: '#fff',
          fontSize: 14,
        },
        formatter: (v: any) => {
          // y轴
          return props.type === 'callduration' ? v + ' h' : Number(v).toFixed(0);
        },
      },
    },
    label: {
      style: {
        fill: '#fff',
        fontSize: 14,
      },
    },
    lineStyle: {
      stroke: '#2d8ef5',
      lineWidth: 6,
    },
    tooltip: { showMarkers: false },
  };

  return (
    <>
      {/* 控件：切换时间间隔 */}
      <div className="switch-time">
        <span className={tab === 'day' ? 'on' : ''} onClick={() => changeTab('day')}>
          日
        </span>
        <span className={tab === 'week' ? 'on' : ''} onClick={() => changeTab('week')}>
          周
        </span>
        <span className={tab === 'month' ? 'on' : ''} onClick={() => changeTab('month')}>
          月
        </span>
      </div>
      {/* @ts-ignore：忽略检测, 应该是GoJS TS声明有问题 */}
      {data.length > 0 && <Line {...config} />}
      {!data.length && (
        <div className="chart-noData">
          <Empty image="/webapp/empty.svg" />
        </div>
      )}
    </>
  );
};

export default ChartLine;
